/**
 * 学习目标：使用useEffect 修改页面标题
 *`useEffect` Hook 看做 `componentDidMount`，`componentDidUpdate` 和 `componentWillUnmount` 这三个函数的组合
 * 声明一个msg，并且把这个msg改变后的值放到标题上
 * 步骤：
 *  1. useState 声明 msg
 *  2. 点击按钮， 调用 setCount 修改 msg
 *  3. 使用副作用函数 useEffect ，把修改后的msg写到title
 */
import React, { useEffect, useState } from 'react';

export default function App() {
  const [msg, setMsg] = useState('我是初始msg');
  const handleChange = (e) => {
    // this.setState({msg:})
    setMsg(e.target.value);
  };

  // ✨使用副作用函数 useEffect ，把修改后的msg写到title
  useEffect(() => {
    document.title = msg;
  });
  return (
    <>
      {/* 定义方法再绑定 */}
      <input type="text" value={msg} onChange={handleChange} />
      {/* 页面上直接绑定方法 */}
      <input
        type="text"
        value={msg}
        onChange={(e) => {
          setMsg(e.target.value);
        }}
      />
    </>
  );
}
